
/* 
    1.当contInput(表单输入框)，输入内容长度大于0时，显示cont-input img（小叉叉）
        input（表单输入）/keyup(键盘抬起)事件
    
    2.点击contInput(表单输入框)，改变当前输入框边框颜色为#00bdff
*/
    
    
/* 
    3.当输入框失去焦点时，定义表单规则，验证输入信息是否合法，不合法显示cont-tips
        定义数组保存规则--正则表达式
*/
    //正则表达式
    let regArr=[
        /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
        /^1[3456789][0-9]{9}$/, //11  : 
        /^[a-zA-Z]\w{3}$/,      //4位验证码: 字母开头,后面跟字母\数字\下划线
        /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
    ]


    //获取元素
    let contInput=document.querySelectorAll('.cont-input input') //表单输入框
    let clearInput=document.querySelectorAll('.cont-input img') //小叉叉   
    let contTips=document.querySelectorAll('.cont-input .cont-tips')//输入框错误时提示信息
    let nowRegister=document.querySelector('.now-register')//立即注册
    let treatyFu=document.querySelector('.treaty-fu') //复选框
 

    //定义变量保存索引
    let index=0
    //遍历
    contInput.forEach(function(v,i){   
        //1.表单输入事件
        v.addEventListener('input',function(){
            if(v.value.length>0){
                this.style.display='block'
            }else{
                this.style.display='none'
            }
        })    
        
        //2.点击事件
        v.addEventListener('click',function(){
            //干掉上一个标签的border
            contInput[index].style.border=''
            //给当前点击的设置边框颜色
            this.style.borderColor='#00bdff'
            //将新的索引赋给index
            index=i
        })

        //3.失焦事件
        v.addEventListener('blur',function(){
            //使用正则表达式.test验证是否合法
            if(regArr[i].test(v.value)){
                //合法
                contTips[i].style.display='none'
            }else{
                //不合法
                contTips[i].style.display='block'
            }
        })

        
        
    })


/* 
    4.点击now-register（立即注册），验证输入信息是否合法，一条一条验证
*/
    //点击事件 使用for循环一条条的结束验证
        nowRegister.addEventListener('click',function(){
            //contInput(表单输入框)for循环
            for(let i=0;i<contInput.length;i++){
                //使用正则表达式.test验证是否合法
                if(regArr[i].test(contInput[i].value)){
                    //合法
                    contTips[i].style.display='none'
                }else{
                    //不合法
                    contTips[i].style.display='block'
                    return //结束
                }
            }
        })


/* 
    5.改变treaty-fu（复选框）选中状态，改变now-register（立即注册）背景颜色，
    取消禁用
*/       
    treatyFu.addEventListener('change',function(){
        //判断
        if(treatyFu.checked){
            //true，选中
            nowRegister.style.backgroundColor='#00bdff'
            nowRegister.style.color='#fff'
            nowRegister.disabled=false //取消禁用
        }else{
            //false，没选中
            nowRegister.style.backgroundColor=''
            nowRegister.style.color='#5f5f5f'
            nowRegister.disabled=true //禁用
        }
    })
